<script setup lang="ts">
import {Search} from "@element-plus/icons-vue";
import * as UserApi from '@/api/system/user/index'
import { ElTree } from 'element-plus'
import * as DeptApi from '@/api/system/dept'
import { defaultProps, handleTree } from '@/utils/tree'

//const userId = defineModel("userId");

const props = defineProps({
  disabled: {
    type: Boolean,
    default: false
  },
  multiple: {
    type: Boolean,
    default: false
  }
});

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref("选择用户")

const deptName = ref('')
const deptList = ref<Tree[]>([]) // 树形结构
const treeRef = ref<InstanceType<typeof ElTree>>()

const userNames = ref([]) // 显示的用户名称
const selectedUserIdList = ref([]) //选中的用户ID
const selectedUserList = ref([]) //选中的用户

const loading = ref(true) // 列表的加载中
const list = ref([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryFormRef = ref() // 搜索的表单
const queryParams = reactive({
  pageNo: 1,
  pageSize: 5,
  name: undefined,
  code: undefined,
  status: 0
})

/** 查询用户列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await UserApi.getUserPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 获得部门树 */
const getTree = async () => {
  const res = await DeptApi.getSimpleDeptList()
  deptList.value = []
  deptList.value.push(...handleTree(res))
}

/** 部门基于名字过滤 */
const filterNode = (name: string, data: Tree) => {
  if (!name) return true
  return data.name.includes(name)
}

/** 展示弹出框 */
const openDialog = () => {
  if (props.disabled) {
    return;
  }
  dialogVisible.value = true;
  getTree();
  getList();
}

/** 关闭弹出框 */
const closeDialog = () => {
  queryFormRef.value.resetFields(); //重置表单
  dialogVisible.value = false; //关闭选择开窗
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1;
  getList();
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields();
  handleQuery();
}

/** 处理部门被点击 */
const handleDeptNodeClick = async (row) => {
  queryParams.deptId = row.id
  await getList()
}
/** 处理用户选中事件*/
const handleSelectedUser = () => {

}
/** 处理清空事件*/
const handleClearSelectedUser = () => {

}
/** 处理移除已选中用户事件*/
const handleRemoveSelectedUser = () => {

}


</script>

<template>
  <!-- 输入框 -->
  <el-input readonly v-model="userNames"  placeholder="请选择用户" :disabled="props.disabled">
    <template #append>
      <el-button :icon="Search" @click="openDialog()" />
    </template>
  </el-input>
  <!-- 弹窗 -->
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="50%">

    <div class="selectBox">
      <!-- 搜索工作栏 -->
      <div class="mb-30px">
        <el-form
          :model="queryParams"
          ref="queryFormRef"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="用户名称" prop="name">
            <el-input
              v-model="queryParams.name"
              placeholder="请输入用户名称"
              @keyup.enter="handleQuery"
              clearable
              class="!w-240px"
            />
          </el-form-item>
          <el-form-item label="手机号码" prop="code">
            <el-input
              v-model="queryParams.code"
              placeholder="请输入手机号码"
              @keyup.enter="handleQuery"
              clearable
              class="!w-240px"
            />
          </el-form-item>
          <el-form-item>
            <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
            <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="topBox">
        <div class="leftBox">
          <div class="contentBox">
            <div class="leftBox_title">组织架构</div>
            <div style="padding: 4px; margin-bottom: 4px">
              <el-input v-model="deptName" clearable placeholder="请输入部门名称">
                <template #prefix>
                  <Icon icon="ep:search" />
                </template>
              </el-input>
            </div>
            <div class="treeBox">
              <el-tree
                ref="treeRef"
                :data="deptList"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                :props="defaultProps"
                default-expand-all
                highlight-current
                node-key="id"
                @node-click="handleDeptNodeClick"
              />
            </div>
          </div>
        </div>

        <div class="leftBox">
          <div class="contentBox">
            <div class="leftBox_title">
              选择人员
            </div>
            <div class="peopleBox">
              <div class="peopleList">
                <el-checkbox-group
                  ref="peopleCheckBoxes"
                  v-model="selectedUserIdList"
                  @change="handleSelectedUser"
                  :max="multiple? 65535 : 1"
                >
                  <el-checkbox
                    v-for="(item, index) in list"
                    :label="item.id"
                    :key="index"
                    class="peopleCard"
                  >
                    <div class="avatarBox">
                      <div style="background: #46a6ff" class="user-avatar">
                        {{
                          item.nickname.substring(0, 1) ||
                          item.username.substring(0, 1) ||
                          "User"
                        }}
                      </div>
                    </div>
                    <div class="peopleInfoBox">
                      <div class="peopleName">
                        {{ item.nickname }} ({{ item.mobile }})
                      </div>
                      <div class="peopleDept">{{item.deptName === null ?  "" :item.deptName }}</div>
                    </div>
                  </el-checkbox>
                </el-checkbox-group>
              </div>
              <!-- 分页 -->
              <div class="pagination">
                <Pagination
                  :total="total"
                  v-model:page="queryParams.pageNo"
                  v-model:limit="queryParams.pageSize"
                  :small = "true"
                  layout="prev, pager, next"
                  @pagination="getList"
                />
              </div>
            </div>
          </div>
        </div>
        <!-- this.checkedUsers -->
        <div class="leftBox">
          <div class="contentBox">
            <div class="leftBox_title">
              已选择人员
              <el-button
                class="leftBox_title_do"
                type="text"
                size="mini"
                @click="handleClearSelectedUser"
              >全部清空</el-button
              >
            </div>
            <div class="peopleBox">
              <div class="peopleList">
                <div
                  v-for="(item, index) in selectedUserList"
                  class="peopleCard"
                  :key="index"
                >
                  <div class="avatarBox">
                    <div style="background: #ffa502" class="user-avatar">
                      {{
                        item.nickname.substring(0, 1) ||
                        item.username.substring(0, 1) ||
                        "User"
                      }}
                    </div>
                  </div>
                  <div class="peopleInfoBox">
                    <div class="peopleName" style="margin-top: 4px">
                      {{ item.nickname }}({{ item.mobile }})
                    </div>
                    <div class="peopleDept">{{ item.deptName === null ?  "" :item.deptName  }}</div>
                  </div>
                  <div class="peopleDeleteBtn" @click="handleRemoveSelectedUser(item.id)" ></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <el-button @click="handleRemoveSelectedUser" type="primary" >确 定</el-button>
      <el-button @click="handleRemoveSelectedUser">取 消</el-button>
    </template>

  </Dialog>
</template>

<style scoped lang="scss">
.content {
  overflow: hidden;
}
.user {
  display: flex;
  .user-tag {
    margin-right: 10px;
  }
}

.selectBox {
  width: 100%;
  min-width: 800px;
  display: flex;
  flex-direction: column;

  .topBox {
    width: 100%;
    display: flex;
    justify-content: space-around;
    .leftBox {
      width: 300px;
      height: 400px;
      margin-right: 10px;

      -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
      0 0 6px 0 rgba(0, 0, 0, 0.04);
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
      display: flex;
      flex-direction: column;

      .leftBox_title {
        height: 40px;
        font-size: 16px;
        line-height: 40px;
        padding-left: 10px;
        background-color: #f5f5f5;
        position: relative;
        .leftBox_title_do {
          position: absolute;
          right: 16px;
          top: 8px;
        }
      }

      .contentBox {
        width: 100%;

      }
    }
  }

  .bottomBox {
    margin-top: 15px;
    width: 100%;
    height: 75px;
    .selectPeopleList {
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      .selectPeopleCard {
        width: 50px;
        height: 56px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 5px 10px;
        .user-avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          color: #fff;
          background: #ffa502;
          font-size: 14px;
          text-align: center;
          line-height: 40px;
        }

        .userInfo {
          width: 100%;
          display: flex;
          flex-direction: column;
          margin-left: 5px;
          margin-right: 5px;

          div:nth-child(1) {
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
            text-align: center;
          }
        }
      }
    }
  }
}

.treeBox {
  width: 100%;
  height: 310px;
  overflow-x: hidden;
  overflow-y: auto;
}

.peopleBox {
  width: 100%;
  height: 360px;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;

  .pagination {
    padding: 0px 10px;
    position: absolute;
    bottom: 0;
  }
  .peopleList {
    width: 100%;
    height: auto;

    .peopleCard:hover {
      background-color: #fafafa;
      transition: 0.2s;

      .peopleName {
        color: #eb6100;
      }
    }
    .peopleCard {
      width: 100%;
      height: 48px;
      border-top: solid #f5f5f5 1px;
      border-bottom: solid #f5f5f5 1px;
      padding-left: 8px;
      display: flex;
      align-items: center;
      cursor: pointer;
      transition: 0.2s;
      ::v-deep .el-checkbox__label {
        display: flex;
        align-items: center;
      }

      .avatarBox {
        width: 40px;
        height: 40px;

        .user-avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          color: #fff;
          font-size: 16px;
          text-align: center;
          line-height: 40px;
          user-select: none;
        }
      }

      .peopleInfoBox {
        width: 190px;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding-left: 8px;

        .peopleName {
          width: 100%;
          height: 20px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 14px;
          line-height: 20px;
        }

        .peopleDept {
          width: 100%;
          height: 20px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 12px;
          line-height: 20px;
          color: #999;
        }
      }

      .peopleDeleteBtn {
        width: 20px;
        height: 20px;
        // border-radius: 50%;
        background: url(../../assets/images/delete0.png) no-repeat;
        background-size: 100% 100%;
        transition: 0.2s;
      }

      .peopleDeleteBtn:hover {
        width: 20px;
        height: 20px;
        // border-radius: 50%;
        background: url(../../assets/images/delete1.png) no-repeat;
        background-size: 100% 100%;
        transition: 0.2s;
      }
    }
  }
}
</style>
